import React, { Component } from "react";
import { StackActions, NavigationActions } from "react-navigation";
import { ScrollView, View, TouchableOpacity, Text, Image, Linking } from "react-native";
import NavBarConfig from "../modules/NavBar";
import { logOut } from "../../util/loginStateManager";
import { LOG_OUT, BGT, WALLET, MEMBER,BGT_INFO } from "../../config/Api";
import http from "../../util/http";

import JpushModule from "jpush-react-native";
import settingStyles from "../../style/pages/setting";
class Setting extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "設置",
        headerRight: []
      },
      navigation
    );

  state = {
    tel: null,
    bgt: null,
    amount: null,
    data: {
      clear_startdate: "2018-08-20",
      clear_enddate: "2018-09-21"
    }
  };

  async getBgtInfo() {
    const data = await http.get(BGT);
    const info = await http.get(BGT_INFO);
    this.setState({
      bgt: data.data.amount,
      data: info.data
    });
  }
  isOutDate() {
    let begin = new Date(this.state.data.clear_startdate).getTime();
    let now = new Date().getTime();
    let end = new Date(this.state.data.clear_enddate).getTime();
    if (begin <= now && now <= end) {
      return true;
    }
    return false;
  }

  async getMemberInfo() {
    const data = await http.get(MEMBER);
    this.setState({
      tel: data.data.tel
    });
  }

  async getWalletInfo() {
    const data = await http.get(WALLET);
    this.setState({
      amount: data.data.amount
    });
  }

  componentWillMount() {
    this.getBgtInfo();
    this.getMemberInfo();
    this.getWalletInfo();
  }

  async handleLogout() {
    const data = await http.post(LOG_OUT);
    if (data) {
      await logOut();
      JpushModule.stopPush();
      this.logoutSuccessHandle();
    }
  }

  logoutSuccessHandle() {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: "Login" })]
    });
    this.props.navigation.dispatch(resetAction);
  }

  render() {
    return (
      <ScrollView style={settingStyles.container}>
        <View style={settingStyles.userInfo}>
          <Image
            source={require("../../assets/40.png")}
            style={settingStyles.userIcon}
          >
          </Image>
          <Text style={settingStyles.userText}>{this.state.tel}</Text>
        </View>

        <View style={settingStyles.couterInfo}>
          <View
            style={[
              settingStyles.couterItem,
              { borderRightColor: "#dadada", borderRightWidth: 1 }
            ]}
          >
            <View style={settingStyles.itemContain}>
              <Text style={settingStyles.itemFont1}>
                代幣{" "}
                <Text style={settingStyles.itemFont2}>
                  {this.state.amount || 0.0}
                </Text>
              </Text>
            </View>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate("GetMoney")}
            >
              <Text style={settingStyles.HandleButton}>提幣</Text>
            </TouchableOpacity>
          </View>
          
          <View style={settingStyles.couterItem}>
            <View style={settingStyles.itemContain}>
              <Text style={settingStyles.itemFont1}>
                BGT{" "}
                <Text style={settingStyles.itemFont2}>
                  {this.state.bgt || 0.0}
                </Text>
              </Text>
            </View>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate(this.isOutDate() ? "Settlement" : "Subscription")}
            >
              <Text style={settingStyles.HandleButton}>{this.isOutDate() ? "结算" : "認購"}</Text>
            </TouchableOpacity>
          </View>
        </View>

        <View>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => this.props.navigation.navigate("RedeemList")}
          >
            <Text style={settingStyles.listContent}>贖回列表</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => this.props.navigation.navigate("SetTradePassword")}
          >
            <Text style={settingStyles.listContent}>交易密碼設置</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => this.props.navigation.navigate("Receiptcode")}
          >
            <Text style={settingStyles.listContent}>我的BGT收款碼</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => this.props.navigation.navigate("InvitedFriendList")}
          >
            <Text style={settingStyles.listContent}>邀請好友</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() =>
              this.props.navigation.navigate("FlowDetail", { type: 1 })
            }
          >
            <Text style={settingStyles.listContent}>代幣明细</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() =>
              this.props.navigation.navigate("FlowDetail", { type: 2 })
            }
          >
            <Text style={settingStyles.listContent}>BGT明細</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() =>
              this.props.navigation.navigate("FlowDetail", { type: 3 })
            }
          >
            <Text style={settingStyles.listContent}>额度明細</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => this.props.navigation.navigate("CurrencySelection")}
          >
            <Text style={settingStyles.listContent}>幣種選擇</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => this.props.navigation.navigate("Feedback")}
          >
            <Text style={settingStyles.listContent}>反饋問題</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={settingStyles.list}
            onPress={() => Linking.openURL("https://appapp.bgt.vip/download") }
          >
            <Text style={settingStyles.listContent}>關於我們</Text>
            <Text style={settingStyles.listRight}>></Text>
          </TouchableOpacity>
        </View>

        <TouchableOpacity onPress={this.handleLogout.bind(this)}>
          <Text style={settingStyles.logoutBtn}>退出登錄</Text>
        </TouchableOpacity>
        <View style={settingStyles.placeholder} />
      </ScrollView>
    );
  }
}

export default Setting;
